{% load static %}
<!doctype html>
<html lang="en" data-bs-theme="auto">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>知了课堂-账号激活</title>
    <link href="{% static 'bootstrap5/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
    <style>
        html,
        body {
            height: 100%;
        }

        .form-signin {
            max-width: 330px;
            padding: 1rem;
        }

        .form-signin .form-floating:focus-within {
            z-index: 2;
        }

        .form-signin input[type="email"] {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    </style>
</head>

<body class="mt-5 bg-body-tertiary">
    <main class="form-signin w-100 m-auto">
        <form method="POST">
            <h1 class="h3 mb-3 fw-normal">知了课堂-员工激活</h1>
            <div class="form-floating">
                <input name="email" type="email" class="form-control" id="emailInput" placeholder="请输入邮箱">
                <label for="emailInput">邮箱</label>
            </div>
            <div class="form-floating">
                <input name="password" type="password" class="form-control" id="passwordInput" placeholder="请输入密码">
                <label for="passwordInput">密码</label>
            </div>
            <button class="btn btn-primary w-100 py-2" type="submit" id="submit-btn">激活</button>
        </form>
    </main>

    <script>
        $("#submit-btn").on('click', function(event){
            event.preventDefault()
            let email = $("#emailInput").val()
            let password = $("#passwordInput").val()
            let emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            if(!emailRegex.test(email)){
                alert("请输入正确格式的邮箱！")
                return;
            }
            if(!password || password.length < 6){
                alert("请输入最少6位的密码！")
                return;
            }
            $.post("/staff/active", {email, password}, function (result){
                if(result.code == 200){
                    alert("激活成功！")
                    window.location = "/"
                }else{
                    alert(result.message)
                }
            })
        })
    </script>
</body>

</html>